<template>
  <div>
    <el-form :model="user" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">欢迎登录 健康体检后台管理系统</h3>
      <el-form-item prop="hmUsername" style="margin-bottom:23px">
        <el-input type="text" v-model="user.hmUsername" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="hmPassword" style="margin-bottom:23px">
        <el-input type="password" v-model="user.hmPassword" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;margin:30px 0">
        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2">登录</el-button>
      </el-form-item>
      <p style="margin-bottom:0px;text-align:right"><el-link type="primary" @click="drawer = true">忘记密码?</el-link></p>
    </el-form>

    <!-- 抽屉找回密码页面 -->
    <el-drawer
      ref="drawerC"
      :visible.sync="drawer"
      direction="ttb"
      :before-close="handleClose"
      size="60%">
      <h1 style="text-align:center">找回密码</h1>
      <div style="margin: 0px 100px">
        <el-steps :active="active" align-center>
          <el-step title="输入手机号码" description=""></el-step>
          <el-step title="验证" description=""></el-step>
          <el-step title="输入新密码" description=""></el-step>
          <el-step title="完成" description=""></el-step>
        </el-steps>
      </div>
      <div style="width: 900px;margin-left:300px;margin-top:39px;text-align:center" v-show="flag1">
        <span>请输入账号绑定的手机号码：</span>
        <el-input v-model="phone" placeholder="请输入手机号码" style="width:300px"></el-input>
        <p><span style="color:red">{{msg1}}</span></p>
        <div style="text-align:center;margin-top:30px">
          <el-button type="primary" @click="nextPhone">下一步</el-button>
        </div>
      </div>
      <div style="width: 900px;margin-left:300px;margin-top:39px;text-align:center" v-show="flag2">
        <h3 style="text-align:center;">绑定该手机号的账号为：{{zhanghao}}</h3>
        <span>请输入验证码：</span>
        <el-input v-model="yanzhengma" style="width:300px"></el-input>
         <el-button type="primary" plain @click="huoqu" :disabled="disabledBtn">{{btnContent}}</el-button>
        <p style="color:red">{{msg2}}</p>
        <div style="text-align:center;margin-top:30px">
          <el-button type="primary" @click="yanzhengClick">下一步</el-button>
        </div>
      </div>
      <div style="width: 900px;margin-left:300px;margin-top:39px;text-align:center" v-show="flag3">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：</span>
        <el-input v-model="pass1" placeholder="请输入密码" type="password" style="width:300px"></el-input>
        <p style="color:red">{{msg3}}</p>
        <span>确认密码：</span>
        <el-input v-model="pass2" placeholder="确认密码" type="password" style="width:300px"></el-input>
        <p style="color:red">{{msg4}}</p>
        <div style="text-align:center;margin-top:30px">
          <el-button type="primary" @click="upPassword">确认</el-button>
        </div>
      </div>
      <div style="width: 900px;margin-left:300px;margin-top:39px;text-align:center" v-show="flag4">
        <el-result icon="success" title="修改密码成功">
          <template slot="extra">
            <el-button type="primary" size="medium" @click="goLogin">去登录</el-button>
          </template>
        </el-result>
      </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  data () {
    return {
      logining: false,
      drawer: false,
      active: 1,
      phone: '',
      zhanghao: '',
      hmId: 0,
      yanzhengma: '',
      jishiqi: null,
      count: 120,
      disabledBtn: false,
      btnContent: '获取验证码',
      msg1: '',
      msg2: '',
      msg3: '',
      msg4: '',
      flag1: true,
      flag2: false,
      flag3: false,
      flag4: false,
      pass1: '',
      pass2: '',
      user: {
        hmUsername: '',
        hmPassword: ''
      },
      rules2: {
        hmUsername: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        hmPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      checked: true
    }
  },
  methods: {
    handleSubmit2 () {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          this.$axios.post(`/api/CommonHealthManager/login?hmUsername=${this.user.hmUsername}&hmPassword=${this.user.hmPassword}`).then(({data}) => {
            if (data != null && data !== '') {
              if (data.hmState === 0) {
                // 登录成功，将信息存入浏览器临时存储，通过对象sessionStorage，也存入store中
                this.$store.commit('saveUser', data)
                sessionStorage.setItem('user', JSON.stringify(data))
                this.$router.push('/home/welcome')
              } else {
                // 账号冻结提示
                this.user.hmPassword = ''
                this.$store.commit('saveUser', {})
                this.$message({
                  message: '账号已被冻结，如需操作请联系管理员',
                  type: 'error'
                })
              }
            } else {
              // 登录失败提示
              this.user.hmPassword = ''
              this.$store.commit('saveUser', {})
              this.$message({
                message: '账号或密码错误，登录失败！',
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 关闭抽屉
    handleClose (done) {
      this.$confirm('确认关闭吗？', '提示', {type: 'warning'})
        .then(_ => {
          this.active = 1
          this.phone = ''
          this.zhanghao = ''
          this.hmId = 0
          this.yanzhengma = ''
          this.count = 120
          this.disabledBtn = false
          this.btnContent = '获取验证码'
          this.msg1 = ''
          this.msg2 = ''
          this.msg3 = ''
          this.msg4 = ''
          this.flag1 = true
          this.flag2 = false
          this.flag3 = false
          this.flag4 = false
          this.pass1 = ''
          this.pass2 = ''
          if (this.jishiqi != null) {
            clearInterval(this.jishiqi)
          }
          this.jishiqi = null
          done()
        })
        .catch(_ => {})
    },
    // 点击去登录
    goLogin () {
      this.$refs.drawerC.closeDrawer()
    },
    // 验证手机号码
    nextPhone () {
      if (this.phone === '') {
        this.msg1 = '请输入手机号码'
      } else if (this.phone.length !== 11) {
        this.msg1 = '手机号码长度为11位'
      } else {
        this.$axios.post(`/api/CommonHealthManager/queryPhone?hmPhone=${this.phone}`).then(({data}) => {
          if (data == null || data === '') {
            this.msg1 = '该手机号未注册过账号!请输入有效的手机号码'
          } else {
            this.zhanghao = data.hmUsername
            this.hmId = data.hmId
            this.active = 2
            this.flag1 = false
            this.flag2 = true
          }
        })
      }
    },
    upPassword () {
      // 验证密码
      if (this.pass1 === '') {
        this.msg3 = '密码不能为空！'
      } else if (this.pass1.length < 6) {
        this.msg3 = '密码不能小于6位'
      } else {
        this.msg3 = ''
        if (this.pass2 === '') {
          this.msg4 = '请输入确认密码'
        } else if (this.pass2 !== this.pass1) {
          this.msg4 = '两次密码不一致'
        } else {
          this.$axios.put(`/api/CommonHealthManager/upPasswordMethod?pass=${this.pass1}&hmId=${this.hmId}`).then(result => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
          })
          this.active = 4
          this.flag3 = false
          this.flag4 = true
        }
      }
    },
    huoqu () {
      this.disabledBtn = true
      // 获取验证码
      this.jishiqi = setInterval(() => {
        this.count--
        this.btnContent = '(' + this.count + ')重新获取'
        if (this.count === 1) {
          this.btnContent = '获取验证码'
          this.disabledBtn = false
          this.count = 120
          clearInterval(this.jishiqi)
          this.jishiqi = null
        }
      }, 1000)
      this.$axios.get(`https://cloud-music-api-lyart.vercel.app/captcha/sent?phone=${this.phone}`).then(result => {
        if (result.data.data) {
          this.$message({
            message: '验证码发送成功！',
            type: 'success'
          })
        } else {
          this.$message.error('发送失败！请稍后再试')
        }
      })
    },
    yanzhengClick () {
      if (this.yanzhengma === '') {
        this.msg2 = '请输入验证码'
      } else {
        this.$axios.get(`https://cloud-music-api-lyart.vercel.app/captcha/verify?phone=${this.phone}&captcha=${this.yanzhengma}`).then(result => {
          if (result.data.data) {
            this.flag3 = true
            this.flag2 = false
            this.active = 3
            this.$message({
              message: '验证成功！',
              type: 'success'
            })
          } else {
            this.$message.error('验证失败')
          }
        }).catch((er) => {
          this.$message.error('验证失败')
          this.msg2 = '验证码错误！'
        })
      }
    }
  }
}

</script>

<style scoped>
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
</style>
